<template>
  <div>
    <!--    查询功能-->
    <div style="margin-bottom: 5px">
      <el-select
        v-model="status"
        placeholder="请选择报名状态"
        style="width: 140px; margin-left: 5px"
      >
        <el-option
          v-for="item in statuses"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <!-- 姓名 -->
      <el-input
        v-model="name"
        @keyup.enter.native="loadPost"
        placeholder="请输入用户名称"
        suffix-icon="el-icon-search"
        style="width: 190px; margin-left: 5px"
      ></el-input>
      <!--      查询按钮-->
      <el-button type="primary" style="margin-left: 5px" @click="loadPost"
        >查询
      </el-button>
      <!--      重置按钮-->
      <el-button type="success" @click="resetParam">重置</el-button>
    </div>

    <!--    列表展示-->
    <el-table
      :data="registrationForms"
      :header-cell-style="{ background: '#D3D3D3FF', color: '#555555' }"
      highlight-current-row
      @current-change="selectCurrentChange"
    >
      <el-table-column type="radio" width="55"></el-table-column>
      <el-table-column prop="id" label="id" width="160"> </el-table-column>
      <el-table-column label="学院名称" width="160">
        <template slot-scope="scope">
          {{ getCollegeName(scope.row.collegeId) }}
        </template>
      </el-table-column>
      <el-table-column label="专业名称" width="100">
        <template slot-scope="scope">
          {{ getmajorName(scope.row.majorId) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="userId"
        label="用户ID"
        width="160"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="用户名称"
        width="80"
      ></el-table-column>
      <el-table-column prop="gender" label="性别" width="80">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.gender === 0 ? 'primary' : 'success'"
            disable-transitions
            >{{ scope.row.gender === 0 ? "男" : "女" }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话号码"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="description"
        label="个人描述"
        width="100"
      ></el-table-column>
      <el-table-column prop="status" label="通过状态" width="80">
        <template slot-scope="scope">
          <el-tag :type="getTagType(scope.row.status)" disable-transitions>{{
            getStatusLabel(scope.row.status)
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间" width="140">
      </el-table-column>
      <!-- <el-table-column prop="gmtModified" label="修改时间" width="140">
      </el-table-column> -->
    </el-table>

    <!--    分页  -->
    <div class="pagination-wrapper">
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { query } from "@/api/registrationService/registrationManagement/query";
import { collegeQueryAll } from "@/api/collegeManagement/queryAll";
import { querCollegeId } from "@/api/major/queryCollegeId";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "registrationManagement",
  data() {
    return {
      shouldLogRegistrationForms: true, // 控制是否执行日志记录
      collegeAll: [], // 存储学院区域选项数据
      majorAll: [], // 存储专业区域选项数据
      page: 1,
      limit: 5,
      total: 0,
      name: "",
      registrationForms: [],
      majorId: "",
      onlyPassed: false,
      collegeId: "",
      gender: "",
      genders: [
        {
          value: "0",
          label: "男",
        },
        {
          value: "1",
          label: "女",
        },
      ],
      status: "",
      statuses: [
        {
          value: "0",
          label: "未处理",
        },
        {
          value: "1",
          label: "通过",
        },
        {
          value: "2",
          label: "未通过",
        },
      ],
      id: "",
      centerDialogVisible: false,
      isPrivate: false,
      form: {
        collegeId: "",
        description: "",
        gender: 0,
        id: "",
        majorId: "",
        name: "",
        phone: "",
        status: 0,
        userId: "",
      },
      rules: {
        title: [{ required: true, message: "请输入头衔名称", trigger: "blur" }],
      },
      selectedRow: null, // 添加一个变量来存储当前选中的行数据
    };
  },
  watch: {
    // 监视userInfoForm.collegeId的变化
    collegeId: {
      handler(newVal) {
        // 当collegeId变化时，调用majorData方法
        this.majorData(newVal);
      },
    },
    "form.collegeId": {
      handler(newVal) {
        // 当collegeId变化时，调用majorData方法
        this.majorData(newVal);
      },
    },
  },
  methods: {
    selectCurrentChange(val) {
      this.selectedRow = val; // 更新当前选中的行数据
      this.$emit("doSelectUser", val);
    },
    //将展示列表的学院id换成学院名称
    getCollegeName(collegeId) {
      const college = this.collegeAll.find((c) => c.id === collegeId);
      return college ? college.name : "未选择学院";
    },
    //将展示列表的专业id换成专业名称
    getmajorName(majorId) {
      const major = this.majorAll.find((c) => c.id === majorId);
      return major ? major.name : "未选择专业";
    },

    //通过状态的标签
    getTagType(status) {
      switch (status) {
        case 0:
          return "warning"; // 未处理，通常使用黄色
        case 1:
          return "success"; // 通过，通常使用绿色
        case 2:
          return "danger"; // 未通过，通常使用红色
        default:
          return "info"; // 默认情况，使用蓝色
      }
    },
    getStatusLabel(status) {
      switch (status) {
        case 0:
          return "未处理";
        case 1:
          return "通过";
        case 2:
          return "未通过";
        default:
          return "未知";
      }
    },
    //重置表单
    resetForm() {
      this.$refs.form.resetFields();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    handleSizeChange(val) {
      this.page = 1;
      this.limit = val;
      this.loadPost();
    },
    handleCurrentChange(val) {
      this.page = val;
      console.log(val);
      this.loadPost();
    },
    resetParam() {
      this.name = "";
      this.collegeId = "";
      this.majorId = "";
      this.gender = "";
      this.status = "";
      this.loadPost();
    },
    loadPost() {
      const params = {
        collegeId: this.collegeId,
        name: this.name,
        majorId: this.majorId,
        gender: this.gender,
        status: this.status,
        onlyPassed: this.onlyPassed,
      };
      query(this.page, this.limit, params).then((res) => {
        if (res.code === 20000) {
          this.registrationForms = res.data.page.records;
          this.total = res.data.page.total;
          for (let index = 0; index < this.registrationForms.length; index++) {
            if (this.registrationForms[index].collegeId) {
              this.majorData(this.registrationForms[index].collegeId);
            }
          }
        }
      });
    },
    collegeData() {
      collegeQueryAll()
        .then((res) => {
          this.collegeAll = res.data.collegeList.map((item) => ({
            id: item.id,
            name: item.name,
          }));
        })
        .catch((error) => {
          console.error("Error fetching region data:", error);
        });
    },
    majorData(collegeId) {
      // 确保传入学院ID
      if (!collegeId) return;
      querCollegeId(collegeId).then((res) => {
        console.log(res);

        // 假设这里存在一个方法来将查询到的专业数据添加到当前表单对象中
        this.majorAll = res.data.majorList.map((item) => ({
          id: item.id,
          name: item.name,
        }));
      });
    },
    fetchMajorDataForAllRegistrations() {
      for (let index = 0; index < this.registrationForms.length; index++) {
        if (this.registrationForms[index].collegeId) {
          this.majorData(this.registrationForms[index].collegeId);
          console.log(this.majorAll);
        }
      }
    },
  },
  beforeMount() {
    this.loadPost();
    this.collegeData();
  },
};
</script>

<style scoped>
.custom-checkbox .el-checkbox__input {
  width: 16px;
  height: 16px;
  border-radius: 50%; /* 使边框为圆形 */
  background-color: #fff; /* 背景色 */
  border: 1px solid #dcdfe6; /* 边框颜色 */
}

.custom-checkbox .el-checkbox__input::after {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
}

.custom-checkbox .el-checkbox__input.is-checked::after {
  content: "";
  background-color: #409eff; /* 主题色 */
  transform: translate(-50%, -50%) scale(1);
}

.custom-checkbox .el-checkbox__input.is-checked {
  border-color: #409eff; /* 选中时边框颜色 */
}

.pagination-wrapper {
  bottom: 0;
  width: 100%;
  /*background-color: #f5f5f5;*/
  padding: 10px 20px;
  /*box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-container {
  max-width: 800px; /* 设置最大宽度以避免在大屏幕上过分拉伸 */
  /* margin: 0 30%; 居中显示分页组件 */
}
</style>
